import React from "react";
import "./index.css";
import Blank from "../Blank";
import ItemBankDetail from "../../Common/svg/ItemBankDetail";
import { Rate } from 'antd';

export default class  extends React.Component{
    
    constructor(props){
        super();
        this.state={
            answerCode:props.answerCode,
            desc:props.desc,
            difficulty:props.difficulty
        }
    }
    UNSAFE_componentWillReceiveProps(props){
        this.setState({
                answerCode:props.answerCode,
                desc:props.desc,
                difficulty:props.difficulty
        });
    }
    render(){
        return(
            <div className="QuestingSelecter_Container">
                <div className="QuestingSelecter_Left"></div>
                <div className="QuestingSelecter_Right">
                    <div className="flexContainer">
                        <span className="QuestionAnswer_Title">参考答案:
                            <span className="QuestionAnswer_LeftMarge">
                                {this.state.answerCode}
                            </span>
                        </span>
                        <Blank/>
                        <span className="QuestionAnswer_StarTitle">试题难度
                            <span className="QuestionAnswer_Star"><Rate disabled allowHalf value={this.state.difficulty} /></span>
                        </span>
                    </div>
                    <div>
                        <span></span>
                            <span className="QuestionAnswer_Title">
                            <ItemBankDetail/>
                            <span className="QuestionAnswer_LeftMarge">试题解析</span>
                        </span>
                    </div>
                    <p className="QuestionAnswer_Desc">{this.state.desc}</p>
                </div>
            </div>
        )
    }
}